<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展示手写代码实现</title>
    <!-- <script src="./第三章.js"></script> -->
</head>
<body>
    <script>
        function render(vnode,container){
            let el = document.createElement(vnode.tag);
            for(let key in vnode.props){
                if(/^on/.test(key)){
                    // console.log(vnode.props[key],'=====')
                el.addEventListener(
                    key.substr(2).toLowerCase(),
                    vnode.props[key]
                )
                }
            }
            console.log(typeof vnode.children,'typeof vnode.children')
            if(typeof vnode.children == 'string'){
                el.appendChild(document.createTextNode(vnode.children))
            }else if(typeof vnode.children == 'Object'){
                vnode.children.forEach(item=>{
                    render(item, el)
                })
            }    
            container.appendChild(el)
        }
        let body = document.body
        render({
            tag:"div",
            props:{
                onClick:()=> alert('click me')
            },
            children:'哈哈哈'
        },body)
    </script>
</body>
</html>